<template>
  <div class="addExamUserContainer">
    <!-- 弹窗 -->
    <el-dialog v-model="store.openAddUser" :show-close="false" append-to-body class="dialogClass" width="40%" draggable overflow>
      <!--弹窗标题-->
      <template #header="{ close, titleId }">
        <div class="dialogHeader">
          <span :id="titleId" class="dlgTitleClass" style="margin: 10px 10px;">添加考试人员</span>
          <el-icon style="font-size: 18px;margin-top: 14px;cursor: pointer" @click="closeDialog()">
            <CloseBold/>
          </el-icon>
        </div>
      </template>
      <!--弹窗内容-->
      <template #default>
        <span style="margin: 20px">所属部门：</span>
        <el-cascader
            v-model="result"
            :options="options"
            :props="props"
            :show-all-levels="false"
            :max-collapse-tags="3"
            :collapse-tags="true"
            placeholder="所属部门"
            style="min-width: 350px;max-width: 500px"
        >
          <template #default="{ node, data }">
            <span>{{ data.label }}</span>
            <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
          </template>
        </el-cascader>
      </template>
      <!--弹窗底部-->
      <template #footer>
        <span class="myDialogFooter">
          <el-button class="el-button__default" @click="closeDialog()">取 消</el-button>
          <el-button type="primary" class="el-button__primary" @click="addExamUser">确认添加</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">

import {CloseBold} from "@element-plus/icons-vue";
import {defineEmits, onMounted, ref} from "vue";
import {getDeptTreeApi} from "@/api/dept";
import {ElMessage, ElMessageBox} from "element-plus";
import {addExamUserApi} from "@/api/question/exam.ts";
import {examBaseStore} from "@/stores/question/examStore.ts";
const  store=examBaseStore()
const emit = defineEmits(['refresh'])
const True = ref(true)
const result = ref([])
onMounted(() => {
  initOptions()
})
const props = {
  multiple: true,
  children: 'children',
  label: `label`,
  value: "id",
  emitPath: false
}
const options = ref([])

const initOptions = async () => {
  const res = await getDeptTreeApi(null)
  options.value = res.data.children
}
const closeDialog=()=>{
  result.value=[]
  store.setOpenAddUser(false)
  store.setExamBaseId(0)
}
const addExamUser = async () => {
  if (result.value.length===0){
      ElMessage.warning('请选择考试人员');
      return
  }
  ElMessageBox.confirm('添加考试人员将清除原有人员', '确认添加', {
    app: undefined, components: undefined, config: undefined, directives: undefined, mixins: [], provides: undefined,
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    const res=await addExamUserApi(store.examBaseId, result.value)
    if (res.data){
      ElMessage.success("添加成功")
      closeDialog()
      //调用父组件的方法
      emit('refresh')
    }else {
      ElMessage.error("添加失败")
    }
  })
}
</script>
<style scoped>
.el-dialog .el-dialog__header {
  margin: 0 !important;
  padding: 0 !important;
}

.el-dialog .dialogHeader {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: 40px;
  margin: 0 10px;
  font-size: 18px;
  font-weight: bolder;
}
</style>